<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible="visible"
      :modal-append-to-body="false"
      width="60%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-card class="box-card" shadow="never">
        <el-row>
          <el-upload
            ref="bacthUpload"
            :action="actionUrl"
            accept=".xls, .xlsx"
            :limit="1"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeFileUpload"
            :file-list="fileList"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
          </el-upload>
          <el-divider content-position="left">导入说明</el-divider>
          <div v-show="dialogType == 'push'" class="link-left">
            <li>
              线下整理好需导入的表格。
            </li>
            <li>
              表格格式：SKU编码、启用状态（<span class="text-warning">1为启用、2为禁用</span>）、适用客户类型（<span class="text-warning">工程,工业,政府,商贸</span>）。
            </li>
            <li>导入表格从第二行开始导入，第一行为表头不导入。</li>
            <li>当导入的商品SKU编码错误，则不进行导入，即导入不成功。</li>
            <li>主推导入，不支持导入主推区域，主推区域默认为全部。</li>
            <li>
              提交后页面关闭，系统后台更新数据，根据数据量大小更新时间不同。
            </li>
            <li>每次导入的限制为5W。</li>
          </div>
          <div v-show="dialogType == 'new'" class="link-left">
            <li>
              线下整理好需导入的表格。
            </li>
            <li>
              表格格式：SKU编码、启用状态（<span class="text-warning">1为启用、2为禁用</span>）、失效时间（<span class="text-warning">例：2022-11-02 00:00:00</span>）。
            </li>
            <li>导入表格从第二行开始导入，第一行为表头不导入。</li>
            <li>当导入的商品SKU编码错误，则不进行导入，即导入不成功。</li>
            <li>主推导入，不支持导入主推区域，主推区域默认为全部。</li>
            <li>
              提交后页面关闭，系统后台更新数据，根据数据量大小更新时间不同。
            </li>
            <li>每次导入的限制为5W。</li>
          </div>
        </el-row>
      </el-card>
      <el-row slot="footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitUpload">提交</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    dialogVisible: false,
    dialogType: ''
  },
  data () {
    return {
      fileList: [],
      pushUrl:
        '/sysback/manage/productmanagerattrskurel/batchUpdatePromotionAttrPush',
      newUrl:
        '/sysback/manage/productmanagerattrskurel/batchUpdatePromotionAttrNew'
    };
  },
  computed: {
    visible () {
      return this.dialogVisible;
    },
    dialogTitle () {
      return this.dialogType == 'push' ? '批量更新主推' : '批量更新新上';
    },
    actionUrl () {
      return this.dialogType == 'push' ? this.pushUrl : this.newUrl;
    }
  },
  methods: {
    uploadSuccess (response, file, fileList) {
      console.log(response);
    },
    uploadError (res) {
      this.$message.error(res.error || '提交失败');
    },
    beforeFileUpload (file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过10MB!');
      }
      return isLt10M;
    },
    handlePreview (file) {
      console.log(file);
    },
    handleRemove (file, fileList) {
      console.log(file);
      console.log(fileList);
    },
    submitUpload () {
      this.$refs.bacthUpload.submit();
      this.$refs.bacthUpload.clearFiles();
      this.$emit('handleCloseDialog');
    },
    handleClose () {
      this.$refs.bacthUpload.clearFiles();
      this.$emit('handleCloseDialog');
    }
  }
};
</script>
<style lang="less" scoped>
.line {
  height: 100%;
  width: 3px;
  background: olivedrab;
}
.link-left {
  font-size: 14px;
  color: #5c5b5b;
  height: 100%;
  .text-warning {
    color: red;
  }
}
</style>
